<template>
    <div class="mobile-container">
        <!-- 搜索框 -->
        <van-search
        v-model="searchData"
        shape="round"
        background="#2f9296"
        placeholder="请输入传感器名称"
        />
        <van-nav-bar
        :title="pname"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        />
        <!-- 传感器列表 -->
        <div style="overflow-y: scroll;">
            <div style="max-height: 80vh;">
                <van-row v-for="(item, index) in sensorDataFilter" :key="index" v-model:loading="loading">
                    <van-col span="12" offset="4">
                        <div style="width: 8rem;">
                            <span>{{ item.variant }}</span>
                        </div>                        
                    </van-col>
                    <van-col span="4">
                        <van-button 
                            type="primary" 
                            size="mini" 
                            style="margin: auto 1rem;" 
                            @click="() => router.push({path: '/m/data', query: {'number': route.query.number, 'id': item.id, 'variant': item.variant}})"
                            >数据</van-button>
                    </van-col>
                    <van-col span="4">
                        <van-button 
                            type="success" 
                            size="mini"
                            @click="() => router.push({path: '/m/echart', query: {'number': route.query.number, 'id': item.id, 'variant': item.variant}})"
                            >图表</van-button>
                    </van-col>
                </van-row>
            </div>
        </div>            
        <ToolBar/>
    </div>
    
</template>

<script setup>
import {ref, computed} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { projectList, sensorList } from '@/api';
import ToolBar from '@/views/component/ToolBar.vue';

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const searchData = ref("");
const active = ref(0);
const projectData = ref([]);
const sensorData = ref([]);
// 参数
const pname = route.query.name;
const onClickLeft = () => history.back();
// 请求数据
const onLoad = async()=>{
    const res = await projectList();
    if (res.status === 2000){
        projectData.value = res.data;
        if (res.data){
            const num = res.data[0].number;
            getSensorData(num);
        }
    }else{
        console.log(res.msg);
    }; 
    
}
onLoad();
// 变化
const getSensorData = async (number)=>{
    searchData.value = "";
    const res = await sensorList({'number': number});
    if (res.status === 2000){
        sensorData.value = res.data;
    }else{
        console.log(res.msg);
    }
}
// 使用计算属性过滤 sensorList
const sensorDataFilter = computed(()=>{
    return sensorData.value.filter(s => s.variant.toLowerCase().includes(searchData.value.toLowerCase()));
    loading.value = true; 
})
</script>

<style scoped>

</style>